<div class="task-lists">
  <app-task-list
    *ngFor="let list of (lists$|async)"
    class="list-container"
    app-droppable
    [dragEnterClass]="'drag-enter'"
    [dropTags]="['task-item','task-list']"
    [app-draggable]="true"
    [dragData]="list"
    [ngStyle]="{'order':list.order}"
    [dragTag]="'task-list'"
    [draggedClass]="'drag-start'"
    (dropped)="handleMove($event,list)"
    >
    <app-task-header [header]="list.name"
    (newTask)="launchNewTaskDialog(list)"
    (moveAll)="launchCopyTaskDialog(list)"
    (delList)="launchConfirmDialog(list)"
    (onEditList)="launchEditListDialog(list)"
    ></app-task-header>
    <app-quick-task (quickTask)="handleQuickTask($event,list)"></app-quick-task>
    <app-task-item
    *ngFor="let task of list.tasks"
    [item]="task"
    (taskClick)="launchUpdateTaskDialog(task)"></app-task-item>
  </app-task-list>
  <button class="fab-button" mat-fab type="button" (click)="launchNewListDialog($event)">
    <mat-icon >add</mat-icon>
  </button>
</div>
